<template>
  <div class="container">
    <!-- <router-link to="/login">登录页</router-link>
    <router-link to="/register">注册页</router-link>
    <router-link to="/user">个人中心</router-link>
    <router-link to="/mycomments">跟帖</router-link> -->

    <!-- 头部 -->
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"> </span>
      </div>
      <div class="search" @click="$router.push('/search')">
        <span class="iconfont iconsearch"></span>
        <span class="tips">搜索新闻</span>
      </div>
      <div class="user">
        <span class="iconfont iconwode" @click="$router.push('/user')"></span>
      </div>
    </div>
    <!-- 导航 -->
    <van-tabs v-model="activeIndex" sticky animated swipeable>
      <van-tab
        v-for="(category, index) in categoryList"
        :title="category.name"
        :key="index"
      >
        <van-list
          v-model="category.loading"
          :finished="category.finished"
          finished-text="没有更多了"
          @load="loadMore"
        >
          <!-- 文章列表组件 -->
          <newList
            v-for="(item, index) in category.postList"
            :key="index"
            :item="item"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { article, category } from "@/api/index";
import newList from "../components/newList";
export default {
  components: {
    newList,
  },
  data() {
    return {
      categoryList: [],
      activeIndex: 0,
      news: [],
    };
  },
  computed: {
    curCate() {
      // 当前激活分类, 应该就是
      // 从分类列表中, 取出当前激活索引
      return this.categoryList[this.activeIndex];
    },
  },
  watch: {
    activeIndex() {
      if (this.activeIndex == this.categoryList.length - 1) {
        this.$router.push("/manage");
      } else {
        if (this.curCate.postList.length == 0) {
          this.loadPost();
        }
      }
      // console.log(this.activeIndex);
    },
  },
  methods: {
    loadPost() {
      this.$axios({
        url: "/post",
        params: {
          category: this.curCate.id,
          pageSize: this.curCate.pageSize,
          pageIndex: this.curCate.pageIndex,
        },
      }).then((res) => {
        this.curCate.postList = [...this.curCate.postList, ...res.data.data];
        // console.log(this.curCate.postList);
        this.curCate.loading = false;
        if (res.data.data.length < this.curCate.pageSize) {
          this.curCate.finished = true;
        }
      });
    },
    loadMore() {
      this.curCate.pageIndex += 1;
      this.loadPost();
    },
  },
  created() {
    // this.getArticleList(0);
    // this.loadPost();
    // this.getCategory();
    if (localStorage.getItem("active")) {
      let categories = JSON.parse(localStorage.getItem("active"));
      // console.log("本地数据");
      // console.log(categories);
      // 因为原来所有的远程数据都放在一个 res.data.data 里面
      // 如果想无缝衔接之前的逻辑, 可以自己构造这么一个对象
      let res = {
        data: {
          data: categories,
        },
      };

      this.categoryList = res.data.data.map((category) => {
        return {
          ...category,
          postList: [],
          pageSize: 5,
          pageIndex: 1,
          loading: false,
          finished: false,
        };
      });

      this.categoryList.push({
        name: "+",
      });

      // console.log(this.categoryList);

      this.loadPost();
    } else {
      this.$axios({
        url: "/category",
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        // 这里是获取到数据之后的一系列操作
        // 其实, 无论数据是从远程服务器还是 localStorage 获取
        // 操作都是一样
        // 改变的只是 res 来源
        // console.log("远程数据");
        // console.log(res.data.data);
        this.categoryList = res.data.data.map((category) => {
          return {
            ...category,
            postList: [],
            pageSize: 5,
            pageIndex: 1,
            loading: false,
            finished: false,
          };
        });
        console.log(this.categoryList);
        this.categoryList.push({
          name: "+",
        });

        // console.log(this.categoryList);

        this.loadPost();
      });
    }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
// .container {
//   width: 360s/360 * 100vw;
// }
.header {
  padding: 0 20 /360 * 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50 /360 * 100vw;
  background-color: #ff0000;
  .logo {
    color: #fff;
    .iconnew {
      font-size: 50 /360 * 100vw;
    }
  }
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210 /360 * 100vw;
    height: 40 /360 * 100vw;
    background-color: #f97979;
    border-radius: 20 /360 * 100vw;
    color: #fff;
    .iconsearch {
      font-size: 18 /360 * 100vw;
    }
    .tips {
      margin-left: 3 /360 * 100vw;
      font-size: 16/360 * 100vw;
    }
  }
  .user {
    color: #fff;
    .iconwode {
      font-size: 30 /360 * 100vw;
    }
  }
}
.nav {
  padding: 0 10 /360 * 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40 /360 * 100vw;
  background-color: #e4e4e4;
  .list {
    width: 320 /360 * 100vw;
    ul {
      display: flex;
      li {
        flex: 1;
        font-size: 16 /360 * 100vw;
      }
    }
  }
  .jump {
    transform: rotate(-90deg);
    .iconjiantou {
      font-size: 18 /360 * 100vw;
      font-weight: 700;
    }
  }
}
.new {
  .single {
    display: flex;
    justify-content: space-between;
    padding: 15 /360 * 100vw 13 /360 * 100vw;
    border-bottom: 1px solid #ccc;
    .right {
      width: 200 /360 * 100vw;
      .title {
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        font-size: 18 /360 * 100vw;
      }
      .publisher {
        margin-top: 8 /360 * 100vw;
        font-size: 12 /360 * 100vw;
        color: #ccc;
        .reply {
          margin-right: 5 /360 * 100vw;
        }
      }
    }
    .left {
      width: 112/360 * 100vw;
      height: 74 /360 * 100vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .multiple {
    padding: 15 /360 * 100vw 13 /360 * 100vw;
    border-bottom: 1px solid #ccc;
    .title {
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
  }
  .img {
    display: flex;
    justify-content: space-between;
    img {
      margin: 3 /360 * 100vw 0;
      width: 112 /360 * 100vw;
      height: 74 /360 * 100vw;
    }
  }
  .publisher {
    margin-top: 8 /360 * 100vw;
    font-size: 12 /360 * 100vw;
    color: #ccc;
    .reply {
      margin-right: 5 /360 * 100vw;
    }
  }
}
/deep/ .van-tab:nth-last-child(2) {
  position: sticky;
  // left: 0;
  // color: red;
  right: -8 /360 * 100vw;
  width: 44 /360 * 100vw;
  line-height: 44 /360 * 100vw;
  font-size: 24px;
  background-color: #fff;
  font-weight: 700;
}
</style>